<template>
	<view class="text-message" :class="[message.flow === 'out'?'outr':'']">
		<text class="text-message-con" :class="{'text-message-con-text':item.name != 'img'}"
			v-for="(item, index) in renderDom" :key="index" selectable user-select>
			<text class="message-text" v-if="item.name === 'span'">{{item.text}}</text>
			<text class="message-text" v-if="item.name === 'img'">{{item.src | emoji}}</text>
			<!-- <image v-if="item.name === 'img'" class="emoji-icon" :src="item.src"></image> -->
			<!-- <text class="emoji-icon" v-if="item.name === 'img'"
				:style="{'background-image': 'url('+ item.src +')','transform-origin':'0 0','display': 'inline-block','overflow':'hidden','vertical-align':'middle'}">
			</text> -->
		</text>
	</view>
</template>

<script>
	import {
		parseText
	} from '@/utils/message-facade';

	export default {
		data() {
			return {
				renderDom: []
			};
		},
		props: {
			message: {
				type: Object
			}
		},
		filters: {
			//处理函数
			emoji(value) {
				let emoji_value = value
				if(value.indexOf("https://web.sdk.qcloud.com/im/assets/emoji/")){
					emoji_value = value.split('https://web.sdk.qcloud.com/im/assets/emoji/')[1]
				}
				return emoji_value
			}
		},

		watch: {
			message: {
				handler: function(newVal) {
					this.renderDom = parseText(newVal)
				},
				immediate: true,
				deep: true
			}
		},
		methods: {}
	};
</script>

<style lang="scss">
	.message-text {
		max-width: 410rpx;
		word-break: break-all;
	}

	.text-message-box {
		.isPeerRead {}
	}

	.outr {
		border-radius: 20rpx !important;
		background-color: #282D2D !important;
		color: #fff !important;
	}

	.text-message-con {
		vertical-align: middle;
		// display: inline-block;
		// flex: 1;
	}

	.text-message-con-text {
		// flex: 1;
	}

	.emoji-icon {
		width: 37rpx;
		height: 37rpx;
		background-size: 37rpx 37rpx;
	}

	.text-message {
		display: inline-block;
		vertical-align: middle;
		// @include flex(row);
		// align-items: center;
		// flex-wrap: wrap;
		max-width: 430rpx;
		padding: 20rpx;
		background-color: #f1f4f7;
		border-top-right-radius: 20rpx;
		border-radius: 20rpx;
		line-height: 37rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #282D2D;
	}
</style>